<template>
  <div class="user-info-container">
    <div class="header">
      <h1>个人信息</h1>
      <div v-for="u in user">
        <h1>游戏实力</h1>
        <p>游戏名称：{{u.name}}</p>
        <p>擅长的位置：{{u.good}}</p>
        <p>擅长的位置：{{u.talent}}</p>
        <p>游戏大区：{{u.region}}</p>
        <p>游戏大区：{{u.price}}</p>
        <h3>游戏展示</h3>
        <el-image :src="u.url" style="width: 420px;height: 240px;"></el-image>
      </div>
    </div>
    <button class="edit-button" @click="edit">编辑</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
     user:{},
    };
  },
  mounted() {
    const  user=this.$route.query.user;
    if (user){
      this.user=JSON.parse(user);
      alert(this.user.pid)
      this.findAPLay();
    }
  },
  methods: {

    edit() {
      console.log('编辑用户信息');
      // 跳转到编辑页面
      this.$router.push('/compile');
    },
    findAPLay() {
      axios.get(`http://localhost:8083/play/Tab?id=${this.user.pid}`).then(res => {
        this.user = res.data.data;
      });
    }
  },
};
</script>

<style scoped>
.user-info-container {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: auto;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  color: #333;
}

.game-selection {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.game-selection span {
  margin: 0 15px;
  font-size: 18px;
  cursor: pointer;
}

.game-selection .active {
  text-decoration: underline;
  color: #00aaff;
}

.game-info {
  margin-bottom: 20px;
}

.game-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.info-item {
  margin: 10px 0;
}

strong {
  color: #333;
}

span {
  color: #555;
}

.game-display {
  text-align: center;
  margin-bottom: 20px;
}

.game-display img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #eaeaea;
}

.edit-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #00aaff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #0088cc;
}
</style>
